<template>
  <div>    
    <!-- 发帖结束 -->
    <!-- 新增开始 -->
    <div class="post_new_counts" style="display: none">
      <div>显示 45 帖子</div>
    </div>
    <!-- 新增结束 -->
    <!-- 推荐内容开始 -->
    <div class="infinite-list-panel" v-loading="loading">
      <div class="infinite-list">
        <!-- 这里触发组件同步更新必须更改key的值为可变 -->
        <div
          class="list-item"
          v-for="item in ForYouData.ForYouList"
          :key="item.post_id"
        >
          <PostList
            ref="fy_post"
            :postData="item"
            @reloadDataList="initData"
            :key="Math.random() * 100"
          />
        </div>
      </div>
      <p class="loading" v-if="ForYouData.loading">{{$t('postlist.loading')}}</p>
      <p class="addload" v-if="!noMore" @click="loadForYouData">{{$t('postlist.clickaddmore')}}</p>
      <p class="nomore" v-if="noMore">{{$t('postlist.nomore')}}</p>
    </div>
    <!-- 推荐内容结束 -->
  </div>
</template>
<script>
import PostList from "@/components/PostList.vue";
//UserPost
//获取统一请求接口
import { getForYouData } from "@/api";

export default {
  name: "MainNewPostListComponents",
  components: {
    PostList,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      ForYouData: {
        currentPage: 1, //起始页数值为1
        loading: false,
        addloadBtn: true,
        pageSize: 10, //每页查询条数
        pageTotal: 1, //取后端返回内容的总页数
        //测试数据
        ForYouList: [
          // { user_id: 1, username: "e4glet", user_nickname: "eaglet",user_headimg:"",user_bgimg:"",user_info:"测试介绍1",user_fo:12,user_fans:500,post_content:"测试内容1",zf_counts:0,tp_url:"http://localhost:8080/img/2023-10-24/8fdaccb2-dfe0-4377-ad30-6413d0a9272e.png",sp_url:"",post_time:"2023-10-24 14:20:02" },
          // { user_id: 1, username: "e4glet", user_nickname: "eaglet",user_headimg:"",user_bgimg:"",user_info:"测试介绍2",user_fo:12,user_fans:500,post_content:"测试内容2",zf_counts:0,tp_url:"http://localhost:8080/img/2023-10-24/9551c6c3-a386-44da-850b-8c71d210b104.jpg|http://localhost:8080/img/2023-10-24/8fdaccb2-dfe0-4377-ad30-6413d0a9272e.png",sp_url:"" ,post_time:"2023-10-24 14:20:02"},
          // { user_id: 1, username: "e4glet", user_nickname: "eaglet",user_headimg:"",user_bgimg:"",user_info:"测试介绍3",user_fo:12,user_fans:500,post_content:"测试内容3",zf_counts:0,tp_url:"",sp_url:"http://localhost:8080/video/2023-10-24/b1618202-b0f8-4cc8-83a2-1b50ee284ce8.mp4",post_time:"2023-10-24 14:20:02"},
        ], //加载推荐贴文数组
      },
      loading: true,
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.ForYouData.currentPage >= this.ForYouData.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    loadForYouData() {
      //滑到底部时进行加载
      this.ForYouData.loading = true;
      setTimeout(() => {
        this.ForYouData.currentPage += 1; //页数+1
        this.getForYouPostData(); //调用接口，此时页数+1，查询下一页数据
      }, 1000);
    },
    //发帖组件触发刷新
    initData() {
      this.reloadData();
      // console.log(JSON.stringify(this.ForYouData.ForYouList));
    },
    //重新加载
    async reloadData() {
      let params = {
        currentPage: 1,
        pageSize: this.ForYouData.pageSize, //每页查询条数
      };
      let res = await getForYouData(params);
      if (res.state == 200) {
        //存放数据的列表累加
        this.ForYouData.ForYouList = res.data.data;
        this.ForYouData.pageTotal = res.data.pageTotal;
        this.ForYouData.loading = false;
        this.loading = false;
      }
    },
    //累计加载
    async getForYouPostData() {
      let params = {
        currentPage: this.ForYouData.currentPage,
        pageSize: this.ForYouData.pageSize, //每页查询条数
      };
      let res = await getForYouData(params);
      // console.log(res.data);
      if (res.state == 200) {
        //存放数据的列表累加
        this.ForYouData.ForYouList = this.ForYouData.ForYouList.concat(
          res.data.data
        );
        this.ForYouData.pageTotal = res.data.pageTotal;
        this.ForYouData.loading = false;
      }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 备注：应用下拉加载的外层容器必须设置固定高度，否则会自动无限加载 */
.infinite-list-panel {
  overflow: hidden;
}

.infinite-list {
  overflow: auto;
  /* height: 100vh; */
}

.infinite-list-panel .addload {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  color: rgb(29, 155, 240);
  font-weight: 700;
}

.infinite-list-panel .loading,
.infinite-list-panel .nomore {
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
}

.NoData {
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
}
</style>